<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel height="400px" indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="carousel-item">
          <img :src="`https://picsum.photos/1200/400?random=${item}`" alt="轮播图" />
          <div class="carousel-overlay">
            <h2>精选图书 {{ item }}</h2>
            <p>发现更多好书，享受阅读乐趣</p>
            <el-button type="primary" size="large">立即查看</el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 分类导航 -->
    <section class="categories">
      <h2>图书分类</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="category in categories" :key="category.id">
          <el-card class="category-card" shadow="hover">
            <img :src="category.image" :alt="category.name" />
            <h3>{{ category.name }}</h3>
            <p>{{ category.description }}</p>
            <el-button type="text" @click="$router.push(`/books?category=${category.id}`)">
              查看更多 <el-icon><ArrowRight /></el-icon>
            </el-button>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 新书推荐 -->
    <section class="new-books">
      <div class="section-header">
        <h2>新书推荐</h2>
        <el-button type="text" @click="$router.push('/books?sort=new')">
          查看全部 <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="book in newBooks" :key="book.id">
          <BookCard :book="book" />
        </el-col>
      </el-row>
    </section>

    <!-- 热门推荐 -->
    <section class="featured-books">
      <div class="section-header">
        <h2>热门推荐</h2>
        <el-button type="text" @click="$router.push('/books?featured=true')">
          查看全部 <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="book in featuredBooks" :key="book.id">
          <BookCard :book="book" />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BookCard from '@/components/BookCard.vue'
import { getBooks } from '@/utils/api'

const categories = ref([
  { id: 1, name: '文学小说', description: '经典文学作品', image: 'https://picsum.photos/300/200?random=1' },
  { id: 2, name: '科技教育', description: '前沿科技知识', image: 'https://picsum.photos/300/200?random=2' },
  { id: 3, name: '经济管理', description: '商业管理智慧', image: 'https://picsum.photos/300/200?random=3' },
  { id: 4, name: '生活艺术', description: '美好生活指南', image: 'https://picsum.photos/300/200?random=4' }
])

const newBooks = ref([])
const featuredBooks = ref([])

const loadBooks = async () => {
  try {
    const [newResponse, featuredResponse] = await Promise.all([
      getBooks({ is_new: true, limit: 4 }),
      getBooks({ is_featured: true, limit: 4 })
    ])
    
    newBooks.value = newResponse.data.results
    featuredBooks.value = featuredResponse.data.results
  } catch (error) {
    console.error('加载图书失败:', error)
  }
}

onMounted(() => {
  loadBooks()
})
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100